<template>
  <div>
      <div id="barChart" ref="barChart"></div> 
  </div>
</template>

<script>
export default {
  name: '2304BBar',

  data() {
    return {
        xArr:["2019/03-01","2019/03-02","2019/03-03","2019/03-04","2019/03-05","2019/03-06","2019/03-07"],
    };
  },

  mounted() {
    this.makeBarChart()
  },

  methods: {
      makeBarChart(){
        // 1.初始化echarts 操作实例
        let mychart=this.$echarts.init(this.$refs.barChart)

        // 2.配置项
        let option={
          title:{
            text:"任务计划",
            textStyle:{
              color:"#129a9c"
            }
          },
          legend:{
            show:false
          },
          grid:{},
          tooltip:{
            formatter:"时间：{b} <br> {a}:{c}",
            backgroundColor:"#129a9c",
            textStyle:{
              color:"#fff"
            }
          },
          xAxis:{
            type:"category",
            data:this.xArr
          },
          yAxis:{
            type:"value",
            splitLine:{
              show:true,
              lineStyle:{
                type:"dashed",
              }
            }
          },
          series:[
            {
              name:"告警量",
              type:"bar",
              data:[10,20,30,40,50,60,70],
              itemStyle:{
                color:{
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'red' // 0% 处的颜色
                      }, {
                          offset: 1, color: 'blue' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
              }
            }
          ]
        }

        // 3.使用配置项显示图表
        mychart.setOption(option)
     
      }
  },
};
</script>
<style lang="scss">
    #barChart{
        width: 800px;
        height: 400px;
        margin: 0 auto;
    }
</style>